<!-- 个人中心 -->
<template>
  <view>
    <view>
      <view class="header">
        <van-image
          radius="50%"
          height="160rpx"
          width="160rpx"
          :src="DefaultImage"
        />
        <view class="login-button">
          <view @click="handleLogin">
            {{ nickName || "请登录" }}
            <van-icon
              v-if="nickName"
              class="icon"
              name="edit"
              size="48rpx"
              @click="toEdit"
            />
          </view>
          <view v-if="nickName" class="login-button-text">欢迎使用</view>
        </view>
      </view>
      <view class="content">
        <view class="content-item" @click="toCollect">
          <van-icon class="icon" size="40rpx" name="records" />
          收藏列表
        </view>
      </view>
    </view>
    <van-dialog
      use-slot
      title="确定登录"
      :show="show"
      show-cancel-button
      confirm-button-open-type="getUserInfo"
      @close="onClose"
      @getuserinfo="getUserInfo"
    >
      <view class="login-text">是否确认登录小程序？</view>
    </van-dialog>
    <van-dialog
      use-slot
      title="请输入学号"
      :show="showStudentNumber"
      show-cancel-button
      confirm-button-open-type="addComment"
      @close="showStudentNumber = false"
      @confirm="addStudentNumber"
    >
      <van-field
        :value="studentNumber"
        placeholder="请输入学号"
        :border="false"
        type="textarea"
        @change="changeStudentNumber"
      />
    </van-dialog>
  </view>
</template>

<script>
import DefaultImage from "@/static/image/avatar.png";
import { GetUserInfo } from "@/api/course/basic.js";
import { wxLogin } from "@/api/login/login.js";
export default {
  name: "UserCenter",
  data() {
    return {
      showStudentNumber: false,
      studentNumber: "",
      nickName: "",
      DefaultImage,
      code: "",
      show: false,
    };
  },
  methods: {
    onClose() {
      this.show = false;
      uni.setStorageSync("allowLogin", false);
    },
    getUserInfo(e) {
      console.log(e);
      uni.setStorageSync("allowLogin", true);
      this.login();
    },
    toCollect() {
      uni.navigateTo({
        url: "/pages/collectList/index",
      });
    },
    toEdit() {
      uni.navigateTo({
        url: "/pages/editUser/index",
      });
    },
    handleLogin() {
      if (!wx.getStorageSync("allowLogin")) {
        this.show = true;
      } else {
        if (!this.nickName) {
          this.autoLogin();
        }
      }
    },
    autoLogin() {
      uni.showLoading();
      uni.login({
        provider: "weixin",
        success: async (loginRes) => {
          const res = await wxLogin({
            code: loginRes.code,
            loginAuthType: 3,
            clientType: 3,
          });
          uni.hideLoading();
          if (res.code === 200) {
            uni.setStorageSync("isLogin", true);
            uni.setStorageSync("token", res.data.token);
            uni.setStorageSync("userInfo", res.data);
            this.nickName = res.data.nickName;
          } else {
            uni.showToast({
              title: res.msg,
              icon: "none",
              duration: 4000,
            });
            if (res.msg !== "用户没有绑定学号，请联系管理员") {
              setTimeout(() => {
                this.showStudentNumber = true;
              }, 2000);
            }
          }
        },
      });
    },
    async login() {
      const userInfo = uni.getStorageSync("userInfo");
      if (userInfo.userId) {
        const res = await GetUserInfo(userInfo.userId);
        if (res.code === 200) {
          this.nickName = res.data.nickName;
        }
      } else {
        this.autoLogin();
      }
    },
    changeStudentNumber(e) {
      this.studentNumber = e.detail;
    },
    addStudentNumber() {
      if (!this.studentNumber) {
        uni.showToast({
          title: "请先输入学号",
          icon: "none",
        });
        return;
      }
      uni.login({
        provider: "weixin",
        success: async (loginRes) => {
          const res = await wxLogin({
            code: loginRes.code,
            loginAuthType: 3,
            clientType: 3,
            studentNumber: this.studentNumber,
          });
          if (res.code === 200) {
            uni.setStorageSync("isLogin", true);
            uni.setStorageSync("token", res.data.token);
            uni.setStorageSync("userInfo", res.data);
            this.nickName = res.data.nickName;
          } else {
            uni.showToast({
              title: res.msg,
              icon: "none",
            });
          }
        },
      });
    },
  },
  async onShow() {
    const userInfo = uni.getStorageSync("userInfo");
    if (userInfo.userId && uni.getStorageSync("allowLogin")) {
      const res = await GetUserInfo(userInfo.userId);
      if (res.code === 200) {
        this.nickName = res.data.nickName;
      }
    }
  },
  onLoad() {},
};
</script>

<style scoped>
.login-text {
  padding: 40rpx 0;
  text-align: center;
}
.header {
  display: flex;
  margin-top: 60rpx;
  padding: 0 40rpx;
}
.userinfo {
  color: #303133;
  padding-top: 20rpx;
  margin-left: 40rpx;
}
.content {
  margin-top: 100rpx;
  border-top: 20rpx solid #e4e7ed;
}
.content-item {
  display: flex;
  align-content: center;
  box-sizing: content-box;
  padding-left: 80rpx;
  line-height: 100rpx;
  color: #606266;
  border-bottom: 2rpx solid #dcdfe6;
}
.content-item .icon {
  margin-right: 12rpx;
}
.login-button {
  height: 60rpx;
  margin-left: 40rpx;
  margin-right: 0;
  padding: 0;
  line-height: 60rpx;
}
.login-button .icon {
  margin-left: 12rpx;
}
.login-button-text {
  font-size: 26rpx;
  margin-top: 8rpx;
  color: #b1b1b1;
}
</style>